<template>
	<div class="songsdetail">
		<!-- 头部 -->
		<div class="head">
			<span @click="goback"><van-icon name="arrow-left" />歌单详情</span>
			<!-- <span>歌曲</span> -->
			<span><van-icon name="ellipsis" size="20" /></span>
		</div>
		<!-- 内容 -->
		<div class="songlists">
			<div
				class="back"
				:style="{ backgroundImage: 'url(' + songlists.coverImgUrl + ')' }"
			></div>
			<div class="white"></div>
			<p class="name">{{ songlists.name }}</p>
			<p class="desc">{{ songlists.description }}</p>

			<img class="create" :src="creators.avatarUrl" alt="" />
			<span class="nickname">{{ creators.nickname }}</span>
			<div class="face">
				<img :src="songlists.coverImgUrl" alt="" />
				<span class="play"
					><van-icon name="play" />{{ playcounts + "万" }}</span
				>
			</div>
			<ul class="songs">
				<li
					class="songss"
					v-for="(item, i) in musiclist"
					:key="item.id"
					@click="gosongDetail(item.id)"
				>
					<span class="num">{{ i + 1 }}</span>
					<span class="singname">{{ item.name }}</span>
					<div class="singers">
						<span class="quality">SQ</span>
						<span class="singername" v-for="v in item.ar" :key="v.id">
							- {{ v.name }}</span
						>
					</div>
					<van-icon
						name="play-circle-o"
						size="21"
						color="#B3B3B3"
						class="playbtn"
					/>
					<van-icon name="weapp-nav" class="weapp" />
				</li>
			</ul>
			<div class="sanlian">
				<span
					><van-icon name="add-o" size="25" class="insanlian" />
					{{ subscribedcounts }}</span
				>
				<span class="shu">|</span>
				<span
					><van-icon name="chat-o" size="25" class="insanlian" />
					{{ commentcounts }}</span
				>
				<span class="shu">|</span>
				<span
					><van-icon name="share-o" size="25" class="insanlian" />
					{{ sharecounts }}</span
				>
			</div>
		</div>
	</div>
</template>

<script>
import { songdetailAPI, songdetail } from "../../api/song";
export default {
	data() {
		return {
			songlists: [],
			playcounts: [],
			subscribedcounts: [],
			commentcounts: [],
			sharecounts: [],
			creators: [],
			idlist: [],
			musiclist: [],
		};
	},
	computed: {},
	watch: {},

	methods: {
		//返回上一页
		goback() {
			this.$router.go(-1);
		},
		//跳到歌曲播放页
		gosongDetail(id) {
			this.$router.push(`/songdetail/${id}`);
		},

		// 把歌单里的详细东西显出来
		async showsongdetail(id) {
			const result = await songdetailAPI(id);
			console.log(result);
			if (result.data.code == 200) {
				this.songlists = result.data.playlist;
				this.playcounts = this.songlists.playCount;
				this.creators = this.songlists.creator;
				this.subscribedcounts = this.songlists.subscribedCount;
				this.commentcounts = this.songlists.commentCount;
				this.sharecounts = this.songlists.shareCount;
				console.log(this.songlists);
				this.idlist = this.songlists.trackIds;
				console.log(this.idlist);
				this.idlist.forEach((v) => {
					this.getmusicurl(v.id);
				});
				if (this.playcounts > 10000) {
					this.playcounts = (this.playcounts / 10000).toFixed(1);
				}
				if (this.subscribedcounts > 10000) {
					this.subscribedcounts = (this.subscribedcounts / 10000).toFixed(0);
					this.subscribedcounts = this.subscribedcounts + "w+";
				}
				if (this.commentcounts > 10000) {
					this.commentcounts = (this.commentcounts / 10000).toFixed(0);
					this.commentcounts = this.commentcounts + "w+";
				}
				if (this.sharecounts > 10000) {
					this.sharecounts = (this.sharecounts / 10000).toFixed(0);
					return (this.sharecounts = this.sharecounts + "w+");
				}
			}
		},
		//把歌单里的歌曲信息显示出来
		async getmusicurl(id) {
			const result = await songdetail(id);
			// console.log(result);
			const result1 = result.data.songs[0];
			// console.log(result1);
			this.musiclist.push(result1);
		},
	},
	created() {
		const id = this.$route.params.id;
		this.showsongdetail(id);
	},
	mounted() {},
	components: {},
};
</script>
<style scoped>
.head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 50px;
	background: #fff;
	padding: 0 10px;
	box-sizing: border-box;
}
/* 头部样式 */
.white {
	width: 100%;
	height: 30px;
	position: absolute;
	top: 220px;
	z-index: 999;
	background-color: #fff;
}
.face {
	width: 120px;
	height: 120px;
	position: relative;
	top: 50px;
	left: 20px;
}
.face img {
	width: 120px;
	height: 120px;
	border-radius: 10px;
	position: absolute;
	top: 0px;
	left: 0px;
}
.songlists {
	position: relative;
}
.back {
	width: 100%;
	height: 220px;
	box-sizing: border-box;
	position: absolute;
	top: 3px;
	border: 1px solid #ccc;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-filter: blur(15px);
	-moz-filter: blur(15px);
	-o-filter: blur(15px);
	-ms-filter: blur(15px);
	filter: blur(15px);
	overflow: hidden;
	z-index: -1;
	opacity: 0.7;
}
.name {
	position: absolute;
	color: #fff;
	top: 50px;
	left: 150px;
}
.desc {
	position: absolute;
	color: #000;
	top: 153px;
	left: 150px;
	font-size: 14px;
	width: 180px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.play {
	box-sizing: border-box;
	padding: 2px 8px 2px 5px;
	height: 25px;
	color: #fff;
	display: inline-block;
	position: absolute;
	border-radius: 20px;
	text-align: center;
	top: 5px;
	right: 5px;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.24);
	font-size: 14px;
}
.create {
	border-radius: 50%;
	width: 40px;
	height: 40px;
	vertical-align: middle;
	position: absolute;
	top: 95px;
	left: 150px;
}
.nickname {
	font-size: 12px;
	position: absolute;
	top: 107px;
	left: 196px;
}
.songs {
	position: absolute;
	top: 250px;
	width: 100%;
}
.songs li {
	background-color: #fff;
	width: 100%;
	box-sizing: border-box;
	height: 60px;
	padding: 5px;
	display: flex;
	flex-direction: column;
	position: relative;
}
.songs li:hover {
	background-color: #e9e9e9;
}
.num {
	position: absolute;
	left: 22px;
	top: 17px;
	color: #a7a7a7;
}
.sanlian {
	display: flex;
	justify-content: space-evenly;
	width: 280px;
	height: 40px;
	border-radius: 30px;
	background-color: #fff;
	color: #000;
	position: absolute;
	top: 200px;
	left: 50%;
	margin-left: -140px;
	align-items: center;
	box-shadow: 1px 2px 3px #ccc, -1px 2px 3px #ccc;
	z-index: 9999;
}
.sanlian span {
	display: flex;
	align-items: center;
}
.shu {
	color: #e9e9e9;
	display: inline-block;
	font-size: 19px;
}
.insanlian {
	margin-right: 5px;
}
.singname {
	width: 230px;
	margin-left: 50px;
	margin-bottom: 5px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.singers {
	width: 230px;
	display: flex;
	font-size: 12px;
	color: #9e9e9e;
	text-indent: 0.3em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.weapp {
	position: absolute;
	right: 20px;
	top: 20px;
}
.playbtn {
	position: absolute;
	right: 60px;
	top: 16px;
}
.quality {
	margin-left: 50px;
	color: #ff6b6b;
	box-sizing: border-box;
	display: inline-block;
	border: 1px solid #ffdddd;
	border-radius: 3px;
	padding: 2px 3px;
	text-align: center;
	text-indent: 0em;
}
.singername {
	line-height: 19px;
}
</style>
